<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>
<!-- 左侧导航栏 -->
<div class="layui-row">
    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test">
        <li class="layui-nav-item"><a href="/manager/managerUser"><i class="layui-icon">&#xe613;</i>用户管理</a></li>
        <li class="layui-nav-item"><a href="/manager/managerKind"><i class="layui-icon">&#xe714;</i>类别管理</a></li>
        <li class="layui-nav-item layui-this"><a href="/manager/managerBook"><i class="layui-icon">&#xe60a;</i>图书管理</a></li>
        <li class="layui-nav-item"><a href="/login/logoutPage"><i class="layui-icon">&#xe609;</i>退出登录</a></li>
    </ul>
</div>

<!-- 右侧 -->
<div class="layui-row" style="margin: 0px 10px 0px 210px; ">
    <fieldset class="layui-elem-field layui-field-title"
              style="margin-top: 10px;">
        <legend id="userNameLegend"></legend>
    </fieldset>
    <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
</div>


<script src="/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>

<!-- 头部工具栏 -->
<script type="text/html" id="toolbar" lay-filter="toolbar">
    <div class="layui-btn-container" style="font-size: unset; ">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="bookName" autocomplete="off" class="layui-input" placeholder="输入书名搜索">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="bookAuthor" autocomplete="off" class="layui-input" placeholder="输入作者搜索">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" id="bookPublisher" autocomplete="off" class="layui-input" placeholder="输入出版社搜索">
                </div>
            </div>
            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="search" style="margin-bottom: 7px; "><i
                    class="layui-icon">&#xe615;</i>搜索
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" style="margin-bottom: 7px; "><i
                    class="layui-icon">&#xe716;</i>上架书籍
            </button>
        </div>
    </div>
</script>

<!-- 数据表格侧面工具栏 -->
<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="bookImgTypeTpl">
    <a onclick="bigImg('{{d.id}}')" style="cursor:pointer">
        <img id="{{d.id}}" src="{{d.bookImg}}"/>
    </a>
</script>

<script type="text/javascript" th:inline="none">
    layui.use(['element','table','layer'], function(){
        let element = layui.element;
        let table = layui.table;
        let layer = layui.layer;

        $(function(){
            $.ajax({
                type: "POST",
                url: '/login/getCurrentUser',
                contentType: "application/json",
                success: function (data) {
                    let obj = JSON.parse(data);
                    $('#userNameLegend').text("当前登录者："+obj['userName'])
                }
            });

        });

        //刷新标志
        let refreshFlag = false;
        setRefreshFlag = function(flag){
            refreshFlag = flag;
        };

        table.render({
            elem: '#dataTable'
            ,toolbar: '#toolbar' //开启头部工具栏
            ,height: 'full-100'
            , method: "POST"
            , contentType: "application/json;charset=UTF-8"
            ,request: {
                pageName: 'currentPage' //页码的参数名称，默认：page
                ,limitName: 'limitCount' //每页数据量的参数名，默认：limit
            }
            ,url:'/manager/getBookData'
            ,cols: [[
                {field:'id', hide:true}
                ,{field:'bookName', width:'9%', title: '书名', sort: true}
                ,{field:'bookValue', width:'9%', title: '售价', sort: true}
                ,{field:'bookNumber', width:'9%', title: '余量', sort: true}
                ,{field:'bookAuthor', width:'9%', title: '作者', sort: true}
                ,{field:'kindName', width:'10%', title: '类别', sort: true}
                ,{field:'bookPublisher', width:'9%', title: '出版社', sort: true}
                ,{field:'bookIntroduce', width:'20%', title: '简介'}
                ,{field:'bookImg', width:'15%', title: '图片', templet:'#bookImgTypeTpl'}
                ,{fixed: 'right', title:'操作', toolbar: '#operationBar'}
            ]]
            ,page: true
            ,limit: 20
        });

        //行工具事件
        table.on('tool(dataTable)', function(obj){
            let id = obj.data.id;
            let layEvent = obj.event;
            if(layEvent === 'edit'){
                let index = layer.open({
                    type : 2,
                    content : "/manager/bookForm",
                    area : [ '800px', '600px' ],
                    title : false,
                    closeBtn: 2,
                    maxmin : false,
                    success: function(layero){
                        let body = layer.getChildFrame('body',index);
                        body.find('#id').val(id);
                    },
                    end: function(){
                        if(refreshFlag === true){
                            window.location = "/manager/managerBook"
                        }
                    }
                })
            }else if(layEvent === 'del'){
                //删除
                layer.confirm('确定要删除该书籍么？', {
                    btn: ['确定','取消']
                }, function(){
                    //确认删除
                    $.ajax({
                        type: "POST",
                        url: '/manager/deleteBook?id=' + id,
                        contentType: "application/json",
                        success: function (data) {
                            if(data === 'success'){
                                layer.msg("删除成功");
                                setTimeout(function(){
                                    //延时两秒后刷新跳转
                                    window.location = "/manager/managerBook";
                                },2*1000);
                            }else{
                                layer.msg("发生错误，删除失败!")
                            }
                        }
                    });
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'search') {
                table.reload("dataTable", {
                    where: {
                        "bookName": $('#bookName').val()
                        ,"bookAuthor": $('#bookAuthor').val()
                        ,"bookPublisher": $('#bookPublisher').val()
                    }
                });
            }if(obj.event === 'add'){
                layer.open({
                    type : 2,
                    content : "/manager/bookForm",
                    area : [ '800px', '600px' ],
                    title : false,
                    closeBtn: 2,
                    maxmin : false,
                    end: function(){
                        if(refreshFlag === true){
                            window.location = "/manager/managerBook"
                        }
                    }
                })
            }
        });

        //点击放大图片
        bigImg = function(pic){
            let p = $("#"+pic);
            layer.open({
                type : 1,
                content : "<img src=\""+p.attr('src')+"\">",
                area : [ document.getElementById(pic).naturalWidth+'px', document.getElementById(pic).naturalHeight+'px' ],
                title : false,
                closeBtn: 2,
                maxmin : false,
            })
        }

    });
</script>
</body>
</html>